<template>
  <div class="page-main">
    <!-- <div class="supbox"> -->
    <!-- <page-title :has-line="true">{{ tit }}</page-title> -->
    <query-page
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :title="tit"
      :total="total"
      row-key="quoteNo"
      row-selection-type="checkbox"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #container-side>
        <batchBtn
          :btn-list="btnList"
          type="1"
          :other-params="{ activeTab, activeRadio, selectedKeys }"
          @result="rowClickResult"
        ></batchBtn>
      </template>
      <template #operate="{ record, rowIndex }">
        <batchBtn
          :other-params="{
            record,
            rowIndex,
            activeTab,
            activeRadio,
            tableRenderKeys2,
            renderData2,
            btnList2,
            popUpComflag,
            detailswitchflag,
            batchBtnType,
            permission: ['procurement:quote-item:selectQuoteItemByPage'],
          }"
          :thiscode="thiscode"
          type="3"
          typecode="quotation"
          @result="operateClickResult"
          @refresh="getData"
        ></batchBtn>
      </template>
    </query-page>
    <!-- </div> -->
    <!-- 批量上传 -->
    <batchImport
      v-if="batchVisible"
      @closeDrawer="closeDrawer"
      @finish="finish"
    ></batchImport>

    <!-- 弹窗 -->
    <popUp
      v-if="popVisible"
      :title-text="popUpTitle"
      :content-text="popUptext"
      :pop-visibleflag="popVisible"
      @handleOk="handleOk"
      @handleCancel="handleCancel"
    >
      <template v-if="contentflag" #content> </template>
    </popUp>

    <!-- 文件导入 -->
    <fileUpload
      v-if="fileValueflag"
      v-model="fileValue"
      type="1"
      btn-name="文件上传"
      btn-type="text"
      title="Excel导入"
      accept=".xlsx"
      :max-size="0.1"
      @restion="fileValueflagfun"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    selectQuoteByPage,
    batchUpdateRegression,
    selectQuoteItemByPage,
  } from '@/api/supplier/quotation-information-maintenance';
  // import pageTitle from '@/common/components/title/page-title.vue';
  import fileUpload from './components/file-upload-page/index.vue';
  import popUp from './components/pop-up.vue';
  import batchImport from './components/batch-import/index.vue';
  import {
    formRenderConfig,
    formComponentConfig,
  } from './components/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from './components/tableComp/baseTableConfig';
  import { baseRenderKeys } from './components/baseDataquotation-information-maintenance';
  import { getBtnList } from './components/baseBtnquotation-information-maintenance';
  import { getBtnList2 } from './components/baseBtn2quotation-information-maintenance';
  import batchBtn from './components/batchBtn.vue';

  const tit = ref('报价信息维护'); // quotation-information-maintenance
  const batchBtnType = ref('quotation');
  const selectedKeys = ref<any[]>([]);
  const activeTab = ref('');
  const activeRadio = ref('');
  const popUpTitle = ref('');
  const popUptext = ref('');
  const total = ref(0);
  const form = ref({
    test: '',
  });
  const isLoading = ref(true); // 一级表格控制loading状态
  const isLoading2 = ref(true); // 二级表格控制loading状态
  // const tabtwoflag = ref(false); // 二级表格控制
  const batchVisible = ref(false); // 批量上传
  const contentflag = ref(false); // 弹窗slot控制
  const popVisible = ref(false); // 弹窗控制
  const popUpComflag = ref(false); // 表单单条信息编辑开关
  const detailswitchflag = ref(true); // 表单单条信息详情开关
  const fileValueflag = ref(false); // 表单单条信息详情开关
  const renderData = ref<any[]>([]);
  const renderData2 = ref<any[]>([]);
  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  // 当前表格要渲染哪些值
  const tableRenderKeys = ref<any[]>([]);
  const tableRenderKeys2 = ref<any[]>([]);
  const btnList = ref<any[]>([]);
  const btnList2 = ref<any[]>([]);
  const thiscode = ref<number>();
  const fileValue = ref({});
  const queryInfolist = ref({});

  const getData = async (queryInfo: object) => {
    renderData.value = [];
    renderData2.value = [];
    isLoading.value = true;
    isLoading2.value = true;
    console.log('queryInfo', queryInfo);
    queryInfolist.value = queryInfo;
    const { data } = await selectQuoteByPage({ ...queryInfo });
    selectedKeys.value = [];
    renderData.value = data.list;
    total.value = data.total;
    isLoading.value = false;

    // pageNo: queryInfo?.pageNo,
    // pageSize: queryInfo?.pageSize,
    // planListNo: queryInfo.name1, // 采购计划编码 queryInfo?.name1
    // inquiryNo: queryInfo.name39, // 询价单编号 queryInfo?.name39
    // mdsItemCode: '', // 物料编码 queryInfo?.name4?.key
    // mdsItemName: queryInfo.name28, // 物料名称 queryInfo?.name28
    // supplierCode: '', // 供应商编码 queryInfo?.name25?.key
    // supplierName: queryInfo.name26, // 供应商名称 queryInfo?.name26
    // directorUserName: '', // 商务经理 queryInfo?.name10?.key
    // orderField: '',
    // order: '',
    // startQueryDate: '', // 起始询价日期
    // endQueryDate: '', // 结束询价日期
    // queryUserName: '', // 询价人
  };

  const selectionChange = async (val: string[]) => {
    selectedKeys.value = val;
    console.log('selectedKeys', val, selectedKeys.value);
  };

  // 初始化tab切换数据
  const initData = () => {
    switch (activeTab.value) {
      case '1':
        formRenderKeys.value = baseRenderKeys.finishedProduct.formRenderKeys;
        tableRenderKeys.value =
          baseRenderKeys.finishedProduct.newTableRenderKeys;
        tableRenderKeys2.value = baseRenderKeys.finishedProduct.RenderKeys122;
        btnList2.value = getBtnList2('888');
        console.log('====================================');
        console.log(formRenderKeys.value);
        console.log('====================================');
        break;

      default:
        console.error('Invalid activeTab value:', activeTab.value);
    }
    btnListChange();
    // console.log(
    //   'init',
    //   'formRenderKeys:',
    //   formRenderKeys.value,
    //   'tableRenderKeys:',
    //   tableRenderKeys.value
    // );
  };

  // 获取键值方法
  const btnListChange = () => {
    btnList.value = getBtnList(activeRadio.value);
  };

  // 各弹窗操作
  const closeDrawer = (flag: boolean) => {
    console.log(flag, '关闭弹窗');
    batchVisible.value = flag;
  };

  // 批量上传后的完成事件
  const finish = (response: any, secretLevel: string, flag: boolean) => {
    console.log(response, secretLevel, flag, '完成');
    batchVisible.value = flag;
  };

  // 处理确定按钮的点击事件
  const handleOk = (flag: boolean) => {
    popVisible.value = flag;

    console.log(form.value.test, '选择的内容');
  };

  const handleCancel = (flag: boolean) => {
    popVisible.value = flag;
  };

  // 行列表操作列点击事件
  const operateClickResult = async (otherParams: any) => {
    console.log('列表操作列点击事件', otherParams.record.id);
    renderData2.value = [];
    const { data } = await selectQuoteItemByPage({
      pmsQuoteId: otherParams.record.id,
      pageNo: 1,
      pageSize: 30,
    });
    // console.log(data);
    renderData2.value = data;
    isLoading2.value = false;
  };

  // 退回
  const batchUpdateRegressionapi = async (selectedKeysall: any) => {
    const { data } = await batchUpdateRegression({
      quoteNoList: selectedKeysall,
    });
    if (data) {
      Message.success('退回成功!');
    } else {
      Message.error('退回失败!');
    }
  };

  const fileValueflagfun = (flag: any) => {
    fileValueflag.value = flag;
    getData(queryInfolist.value);
  };

  // 列表操作列点击事件
  const rowClickResult = async (
    type: string,
    typeChange: string,
    rowParams: any
  ) => {
    console.log(
      '列表操作列点击事件',
      type,
      typeChange,
      rowParams.selectedKeys,
      rowParams.selectedKeys.length
    );

    /**
     * contentflag 弹窗slot控制
     * popVisible 弹窗控制
     */
    // if (rowParams.selectedKeys.length > 0) {
    switch (typeChange) {
      case '511':
        fileValueflag.value = true;
        // Message.success('Excel导入成功！');
        break;
      case '512':
        await batchUpdateRegressionapi(rowParams.selectedKeys);
        await getData(queryInfolist.value);
        break;
      default:
        await getData(queryInfolist.value);
        break;
    }
    // }
    // else {
    //   popUpTitle.value = '提示';
    //   popUptext.value = '请选择至少一条数据！';
    //   popVisible.value = true;
    //   contentflag.value = false;
    // }
  };

  // 监听activeTab变化，更新状态和初始化数据
  watch(activeTab, () => {
    // console.log(newval, oldval, 'activeTab');
    activeRadio.value = '1';
    // tabtwoflag.value = false;
    initData();
  });

  // 组件挂载时的初始化操作
  onMounted(() => {
    activeTab.value = '1';
    activeRadio.value = '1';
    initData();
  });
</script>

<style lang="less" scoped>
  .outbox {
    // width: 100%;
    // height: 100%;
    // margin: 16px;
  }

  .supbox {
    // margin: 8px;
    // padding: 0 24px 16px;
    background-color: white;
    // border-radius: 6px;
  }

  .radio-ara {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  :deep(.arco-radio-button) {
    width: 25%;
    text-align: center;
    border-radius: 2px;
  }

  .page-con {
    height: 100%;
    padding: 20px;
    background-color: #fff;
  }
</style>
